<template lang="html">
  <div class="header-bg">
     <div class="header-inner w">
         <div class="header-logo">
             我是logo
         </div>
         <ul class='header-nav' ref='setClass'>
             <li v-for="(nav, index) in navList" :key="index" @click="navHandle(index)" :class="{active: currentIndex === index}"   >
                 {{nav.name}}
             </li>
         </ul>
     </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            currentIndex: 0,
            //测试数组
            navList: [
                { name: "首页" },
                { name: "关于" },
                { name: "服务" },
                { name: "案例" },
                { name: "动态" }
            ]
        };
    },
    methods: {
        navHandle(index) {
            this.currentIndex = index;
        }
    }
};
</script>

<style lang="scss">
.header-bg {
    height: 80px;
    background: #fff;
    .header-inner {
        height: 100%;
        display: flex;
        justify-content: space-between;
        .header-logo {
            line-height: 80px;
        }
        .header-nav {
            display: flex;
            justify-content: space-between;
            li {
                padding: 0 30px;
                font-size: 1.125rem;
                height: 80px;
                line-height: 80px;
                cursor: pointer;
                &.active {
                    color: #01c7b3;
                    position: relative;
                    &:after {
                        position: absolute;
                        content: "";
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background-color: #01c7b3;
                        top: 60px;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                }
            }
        }
    }
}
</style>
